<template>
	<view>
		<view class="blank30"></view>
		<view class="flex" style="justify-content: center;">
			<view class="avatar-wrapper" @click="nav('/pages/information/information')">
				<u-avatar :src="getImgSrc(candidate.avatar)" :size="upx2px(124)"></u-avatar>
				<image class="icon" src="/static/images/edit-mini.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="blank30"></view>
		<view class="desc">
			Submitting a complete and detailed resume can help me understand your situation and job expectations more
			quickly, allowing me to better assist you in starting your career.
		</view>
		<view class="blank30"></view>
		<u--form :labelStyle="formLabelStyle" labelPosition="top" :model="form" :rules="rules" ref="uForm"
			labelWidth="300">
			<view class="wrapper">
				<!-- About The Candidate -->
				<box title="About The Candidate" icon="/static/images/AboutTheCandidate.png"
					@edit="nav('/pages/information/information')">
					<view class="blank20"></view>
					<u-form-item label="Full Name">
						<u--input :customStyle="inputCustomStyle" placeholder="Enter" :value="candidate.fullName"
							border="none" fontSize="12px" disabled
							@click.native="nav('/pages/information/information')"></u--input>
					</u-form-item>
					<u-form-item label="Gender" prop="sex">
						<u-radio-group :value="candidate.sex" placement="row" labelColor="#524B6B"
							activeColor="#FFB237">
							<view class="flex justify-between sex-radio-wrap" style="position: relative;width: 100%;"
								@click.native="nav('/pages/information/information')">
								<u-radio :labelSize="12" :customStyle="ratioCustomStyle" label="Male"
									:name="0"></u-radio>
								<u-radio :labelSize="12" :customStyle="ratioCustomStyle" label="Female"
									:name="1"></u-radio>
							</view>
						</u-radio-group>
					</u-form-item>
					<view class="text-center see-more" @click="nav('/pages/information/information')">
						See more
					</view>
				</box>
				<!-- Job Searching Status -->
				<box title="Job Searching Status" icon="/static/images/JobSearchingStatus.png" :edit="false">
					<view class="">
						<view class="blank20"></view>
						<u-radio-group v-model="form.jobStatus" placement="column" labelColor="#524B6B"
							activeColor="#FFB237" @change="radioGroupChange">
							<template v-for="item in radioList">
								<u-radio :labelSize="12" :customStyle="ratioCustomStyle2" :label="item.label"
									:name="item.name">
								</u-radio>
							</template>
						</u-radio-group>
						<view class="blank20"></view>
					</view>
				</box>
				<box title="Personal Label" icon="/static/images/PersonalLabel.png" :edit="tag.length!=0"  :add="tag.length==0" @edit="openPopup" @add="openPopup" :border="tag.length!=0">
					<template v-if="tag.length!=0">
						<view class="blank30"></view>
						<view class="flex flex-wrap">
							<template v-for="(item,index) in tag">
								<view class="tag-item" v-if="index<5">
									<view>{{item.memberName}}</view>
								</view>
							</template>
							<view class="mb16" v-if="tag.length>5" @click="openPopup">
								+5 more
							</view>
						</view>
						<view class="text-center see-more" @click="openPopup">
							See more
						</view>
					</template>
				</box>
				<!-- Personal Advantage -->
				<box title="Personal Advantage" icon="/static/images/PersonalAdvantage.png" :border="!!form.personalStrengths" @edit="navSid('/pages/edit/edit?fieldName=personalStrengths&value='+form.personalStrengths)">
					<template v-if="form.personalStrengths">
						<view class="blank30"></view>
						<view class="">
							{{form.personalStrengths}}
						</view>
						<view class="blank30"></view>
					</template>
				</box>
				<!-- Job Search Expectations -->
				<box title="Job Search Expectations" icon="/static/images/JobSearchExpectations.png"
					@edit="navSid('/pages/career/career?id='+expectations.sid)" :border="!!expectations.sid">
					<template v-if="expectations.sid">
						<view class="blank30"></view>
						<view class="mb16 font-28 font-bold">
							<text>working city</text>
							<text class="text-dot">·</text>
							<text>{{expectations.desiredCity}}</text>
						</view>
						<view class="mb16">
							<text>Expected industry</text>
							<text class="text-dot">·</text>
							<text>{{expectations.desiredIndustry}}</text>
						</view>
						<view class="mb16">
							<text>Expected Salary</text>
							<text class="text-dot">·</text>
							<text>￥{{expectations.minSalary}}-{{expectations.maxSalary}}</text>
						</view>
						<view class="blank30"></view>
					</template>
				</box>
				<!-- Work Experience -->
				<box title="Work Experience" icon="/static/images/WorkExperience.png" :edit="false" :add="true"
					@add="navSid('/pages/experience/experience')" :border="work.length!=0">
					<view class="blank30" v-if="work.length!=0"></view>
					<view v-for="(v,k) in work">
						<view class="flex align-start">
							<view class="flex-1">
								<view class="mb16 font-28 font-bold">
									{{v.companyName}}
								</view>
								<view class="mb16">
									<text>{{v.companyCountry}}</text>
								</view>
							</view>
							<image class="icon-img ml20" src="/static/images/iconRemove.png" mode="aspectFit"
								@click="delWork(v.sid)"></image>
							<image class="icon-img ml20" src="/static/images/Edit.png" mode="aspectFit"
								@click="navSid('/pages/experience/experience?id='+v.sid)"></image>
						</view>
						<view class="mb16">
							<text>{{v.industry}}</text>
							<text class="text-dot">·</text>
							<text>{{v.startDate}} - {{v.endDate}}</text>
						</view>
						<view class="mb16">
							{{v.postsName}}
						</view>
						<view class="mb16">
							{{v.department}}
						</view>
						<view class="mb16">
							{{v.descriptionContent}}
						</view>
						<!-- <view class="">
							Show performance
						</view> -->
						<view class="blank30"></view>
					</view>
				</box>
				<!-- Project Experience -->
				<box title="Project Experience" icon="/static/images/ProjectExperience.png"
					@edit="navSid('/pages/project/project?id='+project.sid)" :border="!!project.sid">
					<template v-if="project.sid">
						<view class="blank30"></view>
						<view class="mb16 font-28 font-bold">
							{{project.projectName}}
						</view>
						<view class="mb16">
							{{project.projectRole}}
						</view>
						<view class="mb16">
							{{project.startDate}} - {{project.endDate}}
						</view>
						<view class="mb16">
							{{project.achievementsContent}}
						</view>
						<!-- <view class="">
							Show performance
						</view> -->
						<view class="blank30"></view>
					</template>
				</box>
				<!-- Education -->
				<box title="Education" icon="/static/images/Education.png" :add="true" :edit="false"
					@add="nav('/pages/education/education')" :border="school.length!=0">
					<view class="blank30" v-if="school.length!=0"></view>
					<view v-for="(v,k) in school">
						<view class="flex align-start">
							<view class="flex-1">
								<view class="mb16 font-28 font-bold">
									{{v.school}}
								</view>
								<view class="mb16">
									{{v.schoolName}}
								</view>
							</view>
							<image class="icon-img" src="/static/images/Edit.png" mode="aspectFit"
								@click="navSid('/pages/education/education?id='+v.sid)"></image>
						</view>
						<view class="mb16">
							{{v.major}}
						</view>
						<view class="mb16">
							<text>{{v.startDate}} - {{v.endDate}}</text>
							<text class="text-dot">·</text>
							<text>5 Years</text>
						</view>
						<view class="mb16">
							{{v.content}}
						</view>
						<view class="blank30"></view>
					</view>
				</box>
				<box title="Self-Evaluation" icon="/static/images/Self-Evaluation.png" :border="!!form.content"
					@edit="navSid('/pages/edit/edit?fieldName=content&value='+form.content)">
					<view class="blank30" v-if="form.content"></view>
					<view class="">
						{{form.content}}
					</view>
					<view class="blank30" v-if="form.content"></view>
				</box>
				<box title="Attachments" icon="/static/images/Attachments.png" :border="form.images.length == 0" :edit="false" :add="true" @add="toUpload">
					<template v-if="form.images.length != 0">
						<view class="blank30"></view>
						<view class="flex justify-between">
							<view class="attachments-img-wrap" v-if="form.images[0]">
								<image :src="getImgSrc(form.images[0].cover)" mode="aspectFill"></image>
							</view>
							<view class="attachments-img-wrap" v-if="form.images[1]">
								<view class="cover flex" v-if="form.images[2]">
									<view>+2 pictures</view>
								</view>
								<image :src="getImgSrc(form.images[1].cover)" mode="aspectFill"></image>
							</view>
						</view>
						<view class="blank30"></view>
					</template>
				</box>
				<view class="">
					By submitting your resume, you agree to authorize me to use the information you provide to assist
					you in your job search and to share it with relevant individuals who may offer you job opportunities
					during the process.
				</view>
				<view class="blank30"></view>
			</view>
		</u--form>
		<u-gap height="80"></u-gap>
		<view class="fixed-bottom">
			<view class="wrapper">
				<view class="blank20"></view>
				<u-button type="primary" text="Save and Publish" @click="submit" :disabled="!sid"></u-button>
				<view class="blank20"></view>
			</view>
		</view>

		<u-popup :show="popupShow" @close="onClosePopup" @open="onOpenPopup" :safeAreaInsetBottom="false" mode="center"
			:round="20">
			<view class="w670">
				<box title="Personal Label" icon="/static/images/PersonalLabel.png" :edit="false" :add="false">
					<view class="blank30"></view>
					<view class="flex flex-wrap">
						<template v-for="(item,index) in editTags">
							<view class="tag-item" @click="delTag(index)">
								<view class="mr10">{{item.memberName}}</view>
								<u-icon name="close" size="12" color="#150A33"></u-icon>
							</view>
						</template>
					</view>
					<view class="blank10"></view>
					<view class="">
						New
					</view>
					<view class="blank10"></view>
					<view class="flex">
						<view class="mr15" style="width: 410upx;">
							<u--input :customStyle="tagInputCustomStyle" placeholder="Please enter tag" v-model="newTag"
								border="none" fontSize="12px"></u--input>
						</view>
						<view class="flex-1">
							<u-button :customStyle="tagBtnCustomStyle" type="primary" size="small" :plain="true"
								text="Confirm" @click="addTag"></u-button>
						</view>
					</view>
					<u-gap height="40"></u-gap>
					<u-button type="primary" size="large" text="SUBMIT" @click="tagSubmit"></u-button>
				</box>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		create_tag,
		tag_sid_delete,
		resume_save,
		resume_sid_me,
		resume_sid,
		candidate_sid_candidate_detail,
		work_sid_delete,
		school_sid_delete
	} from '@/common/api.js';
	import nodata from '@/components/nodata.vue';
	import box from './components/box.vue';
	export default {
		components: {
			nodata,
			box
		},
		data() {
			return {
				popupShow: false,
				form: {
					content: '',
					jobStatus: '',
					note: '',
					personalStrengths: '',
					images: []
				},
				rules: {},
				inputCustomStyle: {
					backgroundColor: '#F5F4F6',
					padding: '16upx',
					borderRadius: '16upx',
					fontSize: '24upx',
				},
				tagInputCustomStyle: {
					backgroundColor: '#f7f7f7',
					padding: '16upx',
					borderRadius: '16upx',
					fontSize: '24upx',
					boxShadow: "0px 4px 20px 0px rgba(153, 171, 198, 0.28)"
				},
				tagBtnCustomStyle: {
					height: '80upx',
					boxShadow: '0px 8px 124px 0px rgba(153, 171, 198, 0.18)'
				},
				ratioCustomStyle: {
					width: "48%",
					padding: '24upx 24upx',
					borderRadius: '16upx',
					background: '#F5F4F6'
				},
				ratioCustomStyle2: {
					padding: '24upx 24upx',
					borderRadius: '16upx',
					background: '#F5F4F6',
					margin: '14upx 0',
					wordBreak: 'break-all',
					fontSize: '24upx'
				},
				radioList: [],
				tag: [],
				candidate: {},
				expectations: {},
				project: {},
				school: [],
				work: [],
				newTag: '',
				editTags: [],
				id: ''
			}
		},
		methods: {
			toUpload() {
				let data = JSON.stringify(this.form.images);
				this.navSid('/pages/upload/upload?data=' + data);
			},
			delWork(id) {
				this.$store.dispatch('modal', '确认删除？').then(() => {
					uni.showLoading({
						title: 'loading'
					});
					work_sid_delete(id).then(async (res) => {
						uni.$u.toast('success');
						this.work = this.work.filter(v => v.sid != id);
					})
				}).catch(() => {

				})
			},
			openPopup() {
				if (!this.sid) {
					this.$store.dispatch('modal', '请先完成个人信息').then(() => {
						this.nav('/pages/information/information');
					}).catch(() => {})
					return;
				}
				this.editTags = JSON.parse(JSON.stringify(this.tag));
				this.newTag = '';
				this.popupShow = true;
			},
			tagSubmit() {
				this.popupShow = false;
				// this.getData();
				this.tag = JSON.parse(JSON.stringify(this.editTags));
			},
			addTag() {
				let newTag = this.newTag.trim();
				if (!newTag) {
					uni.$u.toast('Please enter tag');
					return;
				}
				uni.showLoading({
					title: 'loading'
				});
				create_tag({
					"sid": this.sid,
					"tagName": newTag,
					"type": 1
				}).then((res) => {
					// uni.$u.toast('success');
					this.editTags.push({
						sid: res.data,
						memberName: newTag
					});
					this.newTag = '';
					// this.getData();
				}).finally(() => {
					uni.hideLoading();
				})

			},
			delTag(i) {
				let id = this.editTags[i].sid;
				uni.showLoading({
					title: 'loading'
				});
				tag_sid_delete(id).then((res) => {
					// uni.$u.toast('success');
					this.editTags = this.editTags.filter((v, k) => k != i);
				}).finally(() => {
					uni.hideLoading();
				})
			},
			onOpenPopup() {

			},
			onClosePopup() {
				this.popupShow = false;
				this.tag = JSON.parse(JSON.stringify(this.editTags));
				// this.getData();
			},
			submit() {
				// 暂不处理修改逻辑 this.id
				if (!this.sid) {
					this.$store.dispatch('modal', '请先完成个人信息').then(() => {
						this.nav('/pages/information/information');
					}).catch(() => {

					})
					return;
				}
				if (this.form.jobStatus === '') {
					uni.$u.toast('Job Searching Status required');
					return;
				}
				if(this.tag.length == 0){
					uni.$u.toast('Personal Label required');
					return;
				}
				if (this.form.personalStrengths === '') {
					uni.$u.toast('Personal Advantage required');
					return;
				}
				let data = JSON.parse(JSON.stringify(this.form));
				uni.showLoading({
					title: 'loading'
				});
				data.candidateSid = this.sid;
				resume_save(data).then(async (res) => {
					uni.hideLoading();
					this.$store.dispatch('modal', {
						showCancel:false,
						content:'感谢提交！'
					}).then(() => {
						this.resetData();
					})
				})
				// if (this.id) {
				// 	resume_sid(this.id, data).then(async (res) => {
				// 		uni.$u.toast('success');
				// 		setTimeout(() => {
				// 			this.getData()
				// 		}, 2000);
				// 	})
				// }
			},
			resetData(){
				this.$store.commit('set_sid', '');
				this.$store.commit('clear_index_form');
				this.id = '';
				this.candidate = {};
				this.expectations = {};
				this.project = {};
				this.school = [];
				this.tag = [];
				this.work = [];
				this.form.content = '';
				this.form.jobStatus = '';
				this.form.personalStrengths = '';
				this.form.images = [];
			},
			getData() {
				if (!this.sid) {
					uni.stopPullDownRefresh();
					return false;
				}
				uni.showLoading({
					title: '加载中'
				});
				resume_sid_me(this.sid).then(async (res) => {
					let {
						candidate,
						expectations,
						project,
						school,
						tag,
						work,
						content,
						jobStatus,
						images,
						personalStrengths,
						sid
					} = res.data;
					this.id = sid;
					this.candidate = candidate || {};
					this.expectations = expectations || {};
					this.project = project || {};
					this.school = school || [];
					this.tag = tag || [];
					this.work = work || [];

					let storeIndexForm = this.$store.getters.get_indexForm;
					this.form.content = storeIndexForm.content || content || '';
					this.form.jobStatus = storeIndexForm.jobStatus || jobStatus || '';
					this.form.personalStrengths = storeIndexForm.personalStrengths || personalStrengths || '';
					if(storeIndexForm.images){
						this.form.images = storeIndexForm.images
					}else if (images && images.length > 0) {
						this.form.images = images.map(v => {
							return {
								cover: v.cover,
								status: v.status,
								type: v.type,
							}
						});
					}else{
						this.form.images = [];
					}
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
			init() {
				this.radioList = [{
						label: 'Resignation - Arrive at any time',
						name: 0
					},
					{
						label: 'On the job - Arrive within the month',
						name: 1
					},
					{
						label: 'Employed - Consider Opportunities',
						name: 2
					},
					{
						label: 'Employed - not considered yet',
						name: 3
					},
				];
			},
			radioGroupChange(e){
				this.$store.commit('update_index_form', {
					key:'jobStatus',
					value:this.form.jobStatus
				});
			}
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules)
		},
		onShow() {
			uni.$off('refresh_index');
			uni.$once('refresh_index', (v) => {
				this.getData();
			})
			uni.$off('form_update');
			uni.$once('form_update', (v) => {
				this.form[v.key] = v.value;
				this.$store.commit('update_index_form', v);
			})
		},
		onLoad(d) {
			let ascriptionUserId = 61;
			this.$store.commit('set_ascriptionUserId', 61);
			// this.$store.commit('set_sid', '');
			console.log('ascriptionUserId', this.ascriptionUserId);
			// let sid = '55-9848a4aab7934dce8b50a12bcb53b598';
			// let sid = '49-c9615a842b4b4282a132cda4227a7444';
			// this.$store.commit('set_sid', sid);
			this.init();
			this.resetData();
			// this.getData();
		},
		onPullDownRefresh() {
			this.getData();
		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss">
	.fixed-bottom{
		box-shadow: 0px 4px 30px 0px rgba(184, 184, 210, 0.52);
		background-color: #ffffff;
	}
	.desc {
		padding: 0 56upx;
	}

	.avatar-wrapper {
		position: relative;

		.icon {
			position: absolute;
			width: 64upx;
			height: 64upx;
			bottom: -20upx;
			right: -8upx;
		}
	}

	.see-more {
		font-size: 24upx;
		font-weight: normal;
		line-height: 34upx;
		color: #7551FF;
		padding: 28upx 0;
	}

	.tag-item {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		line-height: 32upx;
		background: #F5F4F6;
		padding: 20upx 30upx;
		border-radius: 16upx;
		margin-right: 20upx;
		margin-bottom: 20upx;
		color: #524B6B;
	}

	.mb16 {
		margin-bottom: 16upx;
	}

	.text-dot {
		padding: 0 10upx;
	}

	.icon-img {
		width: 48upx;
		height: 48upx;
	}

	.attachments-img-wrap {
		position: relative;
		width: 280upx;
		height: 204upx;
		border-radius: 10upx;
		overflow: hidden;

		image {
			position: relative;
			display: block;
			width: 280upx;
			height: 204upx;
		}

		.cover {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(12, 54, 72, 0.45);
			z-index: 9;
			color: #FFFFFF;
			justify-content: center;
		}
	}

	.sex-radio-wrap {
		.u-radio {
			pointer-events: none;
		}
	}
</style>